<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box2{
            width: 400px;
            border: 1px solid black;
            box-sizing: content-box;
            text-align: center;
            margin: 0 auto;
        }
        #box2{
            margin-top: 20px;
        }
        table {
            border: 1px solid black;
            width: 400px;
            border-collapse: collapse;
            margin: 0 auto;
            margin-top: 20px;
        }
        tr,
        td {
            border: 1px solid black;
            width: 100px;
            text-align: center;
        }
        button{
            margin: 5px;
        }
    </style>
</head>

<body>
    <div id="box1">
        <table>
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>薪资</td>
                <td>操作</td>
            </tr>
        </table>
    </div>

    <div id="box2">
        <h3>添加新员工</h3> <br>
        姓名 <input type="text" class="txt"> <br>
        年龄 <input type="text" class="txt"> <br>
        薪资 <input type="text" class="txt"> <br>
        <button id="btn">提交信息</button>
    </div>
    <script>
        let btns = document.getElementById("btn")
        console.log(btns)
        btns.onclick = function () {
            let txt = document.querySelectorAll(".txt")
            console.log(txt)
            let txt_name = document.getElementsByClassName("txt")[0].value
            let txt_age = document.getElementsByClassName("txt")[1].value
            let txt_salary = document.getElementsByClassName("txt")[2].value
            if (txt_name == "" || txt_age == "" || txt_salary == "") {
                return alert("内容不能为空！")
            }
            //创建元素，添加内容
            let tr = document.createElement("tr")
            let td_name = document.createElement("td")
            let td_age = document.createElement("td")
            let td_salary = document.createElement("td")
            let a_del = document.createElement("a")
            a_del.style.cssText = "color:blue;text-decoration:underline;cursor:pointer"
            // 将内容按照标签顺序放在标签中
            td_name.innerHTML = txt_name
            td_age.innerHTML = txt_age
            td_salary.innerHTML = txt_salary
            a_del.innerHTML = "删除"
            // 添加到DOM树中
            tr.appendChild(td_name)
            tr.appendChild(td_age)
            tr.appendChild(td_salary)
            tr.appendChild(a_del)
            document.querySelector("table").appendChild(tr)
            // 提交后,输入框内容清空
            for(let key of txt){
                key.value = ""
            }
            a_del.onclick = function () {
                if (!confirm("你确定要删除嘛？")) {
                    return
                }
                let btn = this
                a_del.parentNode.remove()
            }
        }

    </script>
</body>

</html>